<template>
  <div class="container">
    <image
      mode="widthFix"
      class="mine_bg_img"
      src="@/static/images/mine_bg_img.png"
      alt=""
    ></image>
    <uni-nav-bar
      :border="false"
      backgroundColor="transparent"
      statusBar
      title="我的"
      fixed
    />
    <div class="content">
      <div class="mine_self">
        <div class="flex_center">
          <img
            class="avatar_default"
            :src="
              userInfo.avatar
                ? userInfo.avatar
                : require('.../../static/images/avatar_default.png')
            "
            alt=""
          />
          <div class="avatar_info">
            <div class="avatar_name">{{ userInfo.nickName }}</div>
            <div class="avatar_text">{{ userInfo.userName }}</div>
          </div>
        </div>
        <div
          @click="navTo('/pages_mine/mine/editMyInformation')"
          class="btn_blue"
        >
          编辑资料
        </div>
      </div>
      <div class="medal">
        <img class="medal_img" src="../../static/images/medal_img.png" alt="" />
        <div class="medal_content" @click="navTo('/pages_mine/mine/medal')">
          <div class="medal_content_left">
            <div class="content_left_text">成就勋章</div>
            <!-- <div class="content_left_value">
              <text class="medal_got">4</text>
              <text class="medal_notgot">/20</text>
            </div> -->
          </div>
          <div class="medal_content_right">
            <div
              class="medal_little_all"
              @click="navTo('/pages_mine/mine/medal')"
            >
              <div v-for="item in medalList" :key="index">
                <img class="medal_little" :src="item.medalUrl" alt="" />
              </div>
            </div>
            <van-icon class="arrow" name="arrow" />
          </div>
        </div>
      </div>
      <div class="pd_32" style="margin: 60rpx 0 0 0">
        <div class="tabs">
          <van-cell
            @click="navTo('/pages_mine/mine/myStudy')"
            :border="false"
            is-link
          >
            <template #title>
              <div class="flex_center">
                <img
                  class="tabs_img"
                  src="../../static/images/mine/study.png"
                  alt=""
                />
                <text class="custom-title">学习记录</text>
              </div>
            </template>
          </van-cell>

          <van-cell
            @click="navTo('/pages_mine/mine/teachingRecords')"
            :border="false"
            is-link
          >
            <template #title>
              <div class="flex_center">
                <img
                  class="tabs_img"
                  src="../../static/images/mine/teach.png"
                  alt=""
                />
                <text class="custom-title">授课记录</text>
              </div>
            </template>
          </van-cell>
          <van-cell
            @click="navTo('/pages_mine/mine/checkRecords')"
            :border="false"
            is-link
          >
            <template #title>
              <div class="flex_center">
                <img
                  class="tabs_img"
                  src="../../static/images/mine/checktest.png"
                  alt=""
                />
                <text class="custom-title">抽查记录</text>
              </div>
            </template>
          </van-cell>
          <van-cell
            @click="navTo('/pages_knowledge/index')"
            :border="false"
            is-link
          >
            <template #title>
              <div class="flex_center">
                <img
                  class="tabs_img"
                  src="../../static/images/mine/checktest.png"
                  alt=""
                />
                <text class="custom-title">知识库</text>
              </div>
            </template>
          </van-cell>
        </div>
      </div>

      <!--   占位符     -->
      <div style="width: 100%; height: 110rpx"></div>
      <div class="fixed">
        <div @click="unbind_confirm" class="login_out">解除绑定</div>
        <div @click="showDialog = true" class="login_out">退出登录</div>
      </div>
      <vdialog
        @confirm="confirm"
        :show-dialog.sync="showDialog"
        cancel-button-text="取消"
        confirm-button-text="确定"
        content-text="确认退出登录吗？"
      >
      </vdialog>
    </div>
  </div>
</template>

<script>
import vdialog from "../../components/v-dialog";
import { unbind } from "@/common/api/login";
import { getMedalList } from "@/common/api/medal";
export default {
  name: "mine",
  components: {
    vdialog,
  },
  data() {
    return {
      showDialog: false,
      safeTop: "",
      pxtorpx: "",
      userInfo: {},
      version: "",
      medalList: [],
    };
  },
  onShow() {
    //获取顶部安全距离
    this.safeTop = getApp().globalData.$safeTop;
    this.pxtorpx = getApp().globalData.$pxtorpx;
    this.getInfo();
    let miniProgram = wx.getAccountInfoSync();
    this.version = miniProgram.miniProgram.version;
  },

  onLoad() {
    this.getmineMedalList();
  },
  methods: {
    confirm() {
      uni.removeStorageSync("stuId");
      uni.removeStorageSync("userInfo");
      uni.removeStorageSync("schoolInfo");
      uni.removeStorageSync("token");
      uni.removeStorageSync("serverUrl");
      uni.reLaunch({
        url: "/pages/login/login",
      });
    },
    unbind_confirm() {
      unbind(uni.getStorageSync("openId"));
    },
    async getInfo() {
      this.userInfo = uni.getStorageSync("userInfo");
    },
    navTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    getGelectDay(e) {
      console.log(e);
    },
    // 获得勋章
    getmineMedalList() {
      getMedalList().then((res) => {
        this.medalList = res.data.slice(0, 4);
        // console.log(res);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.btn_blue {
  @include btn_plain_line(
    linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%),
    #ffffff,
    #ff9a00
  ) {
    width: 176rpx;
    height: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 74, 88, 0.1);
  }
}

.login_out {
  @include btn_plain(#ffffff, #333333) {
    width: 100%;
    height: 96rpx;
    box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 74, 88, 0.1);
    border-radius: 48rpx;
  }
}

.fixed {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  padding: 0 32rpx;
  box-sizing: border-box;
  bottom: env(safe-area-inset-bottom);
  left: 0;
}

.pd_32 {
  padding: 0 32rpx;
  box-sizing: border-box;
}

.tabs {
  margin-top: 8rpx;
  width: 100%;
  background: white;
  box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 74, 88, 0.1);
  border-radius: 32rpx;
}

::v-deep .first_child .van-cell {
  border-radius: 32rpx 32rpx 0 0;
}

::v-deep .last_child .van-cell {
  border-radius: 0 0 32rpx 32rpx;
}

// ::v-deep .uni-nav-bar-text{
//   font-size: 36rpx!important;
//   font-weight: bold!important;
// }
.medal {
  position: relative;
  width: 100%;

  .medal_img {
    width: 750rpx;
    height: 220rpx;
    border-radius: 32rpx;
  }

  .medal_content {
    width: 488rpx;
    height: 100%;
    position: absolute;
    top: 0;
    left: 192rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;

    // justify-content: space-between;
    .medal_little {
      height: 60rpx;
      width: 60rpx;
      border-radius: 50%;
      margin-right: 16rpx;
    }

    &_left {
      .content_left_text {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      .content_left_value {
        margin-top: 4rpx;
        display: flex;
        .medal_got {
          font-size: 36rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #fead22;
        }
        .medal_notgot {
          font-size: 36rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
    }
    &_right {
      display: flex;
      .medal_little_all {
        display: flex;
        flex: 1;
        .medal_little {
          height: 40rpx;
          width: 40rpx;
          margin-right: 16rpx;
        }
      }
      .arrow {
        color: #999999;
      }
    }
  }
}

.container {
  width: 100%;
  min-height: 100vh;
}

.content {
}

.mine_self {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56rpx 0 52rpx;
  box-sizing: border-box;
}

.flex_center {
  display: flex;
  align-items: center;
}

.avatar_default {
  border-radius: 50%;
  width: 112rpx;
  height: 112rpx;
}

.tabs_img {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}

.avatar_info {
  margin-left: 24rpx;

  .avatar_name {
    font-size: 40rpx;
    font-weight: 600;
    color: #333333;
  }

  .avatar_text {
    font-size: 28rpx;
    font-weight: 400;
    color: #626663;
    margin-top: 8rpx;
  }
}

.mine_bg_img {
  width: 750rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.tabbar_img {
  width: 750rpx;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 1;
}
</style>